<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="/main/css/layout.css" rel="stylesheet" type="text/css" />
    <link href="/main/css/jquery.jscrollpane.lozenge.css" rel="stylesheet" type="text/css" />
    <link href="/main/css/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .pic img{
            width: 55px;
            height: 55px;
        }
        #m1{
            width: 100%;
            height: 1000px;
        }
        #msg_board{
            padding-top: 50px;
            margin-left: 50px;
            width: 1500px;
            margin: 0 auto;
        }
        #title{
            width: 100%;
            height: 50px;
            line-height: 50px;
        }
        #title span{
            font-size: 35px;
            display:block;
            text-align:center;
        }
        #message{
            margin: 0 auto;
            width: 1200px;
            height: 520px;
            border-right: 20px;

        }
        #game{
            width: 80%;
            height: 100%;
            float: left;
            background-color: #9f9f9f;
        }
        #qp{
            margin:  50px 150px;
        }
        #rank{
            width: 20%;
            height: 100%;
            float: left;
            background-color: #01aaed;
        }
        #table{
            height: 80%;
            width: 100%;
            overflow-y: auto;
        }
        #table td{
            margin: 0;
            padding: 0;
            border: 1px solid black;
        }
        #btn_r{
            margin-left: 30%;
        }
        #reset{
            width: 80px;
            height: 65px;
        }
    </style>
</head>

<body>
<!--背景-->
<div class="background"><img src="/main/img/bg1.jpg" alt="加载中" /><div class="logo"></div></div>
<!--主内容开始-->
<div id="container">
    <div id="head">
        <a href="#" class="arrange" id="arrange"></a>
        <div class="h-right">
            <a href="main.html" class="home"></a>
            <img src="/main/img/line.png" width="2" height="50" alt="" />
            <a href="#" class="cloud" id="cloud">
                <div class="same">云同步</div>
            </a>
            <img src="/main/img/line.png" width="2" height="50" alt="" />
            <a href="#" class="bell"><span class="tip">3</span></a>
            <img src="/main/img/line.png" width="2" height="50" alt="" />
            <div class="user">
                <div class="pho"><img id="img" src="/userimg/undefined.jpg" width="52" height="50" alt="" /></div>
                <span id="name">[[*{session.user.user_name}]]
          <div class="user-info" id="twodm">
            <div class="jtt"></div>
            <div class="menu">
              <div class="first">
                <a href="#">个人信息</a>
              </div>
              <div class="second">
                <a href="#">通知<em>3</em></a>
              </div>
              <a href="gologout" class="quit" >退出</a>
            </div>
          </div>
        </span>
            </div>
            <img src="/main/img/line.png" width="2" height="50" alt="" />
            <a href="#" class="notice" id="notice"></a>
        </div>
    </div>
    <!--侧边栏-右-->
    <div class="side-bar" id="side-bar">
        <div class="side-bar-in">
            <ul class="tab">
                <li class="title vtitle">
                    <a href="#" class="lianxi"></a>
                </li>
                <li class="title">
                    <a href="#" class="heart"></a>
                </li>
                <li class="title">
                    <a href="#" class="setting"></a>
                </li>
                <div class="vcon vcon1" id="vcon" style="display:block;" >
                    <ul>
                        <li class="xuanz" th:each="user,userStat:${application.userlist}">
                            <div class="pic"><img th:src="${user.user_img_path}+${user.user_img_name}"></div>
                            <span>
                <h4 th:text="${user.user_name}"></h4>
                <p th:text="${user.user_status}"></p>
              </span>
                            <a href="#" class="v-big"></a>
                    </ul>
                </div>
                <div class="vcon">2</div>
                <div class="vcon">
                    <div class="block">
                        <span>背景颜色选择</span>
                        <a href="#" class="dot" id="blue"><img src="/main/img/blue_dot.png" width="14" height="14" alt="" /></a>
                        <a href="#" class="dot" id="pink"><img src="/main/img/pink_dot.png" width="14" height="14" alt="" /></a>
                        <a href="#" class="dot" id="green"><img src="/main/img/green_dot.png" width="14" height="14" alt="" /></a>
                    </div>
                </div>
            </ul>
        </div>
    </div>
    <!--左侧栏begin-->
    <div class="left-bar" id="left-bar">
        <ul>
            <!--      <li><a href="#" class="synergy">医技协同<em>医技协同</em></a></li>-->
            <!--      <li><a href="#" class="movie">影像诊断<em>影像诊断</em></a></li>-->
            <!--      <li><a href="#" class="computer">预约协同<em>预约协同</em></a></li>-->
            <!--      <li><a href="#" class="drug">预交金管理<em>预交金管理</em></a></li>-->
            <!--      <li><a href="#" class="results">个人绩效<em>个人绩效</em></a></li>-->
        </ul>
    </div>
    <!--左侧栏end-->
    <!--模块-->
    <div id="main">
        <div class="left-side">
            <div class="main_visual">
                <a href="javascript:;" id="btn_prev"></a>
                <a href="javascript:;" id="btn_next"></a>
                <div>
                    <ul>
                        <li>
                            <div id="m1">
                                <div id="msg_board">
                                    <div id="title">
                                        <span>五子棋</span>
                                    </div>
                                    <div id="message">
                                        <div id="game">
                                            <div id="qp">
                                                <canvas id="chess" width="450px" height="450px"></canvas>
                                            </div>
                                        </div>
                                        <div id="rank">
                                            <div id="table">
                                                <table>
                                                    <tr>
                                                        <td>用户姓名</td>
                                                        <td>胜利次数</td>
                                                        <td>游玩次数</td>
                                                    </tr>
                                                    <tr th:each="rank,rankStat:${ranks}">
                                                        <td>
                                                            <span class="username" th:text="${rank.user.user_name}"></span>
                                                        </td>
                                                        <td>
                                                            <span class="score" th:text="${rank.score}"></span>
                                                        </td>
                                                        <td>
                                                            <span class="count" th:text="${rank.count}"></span>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div id="btn_r">
                                                <button id="reset" onclick="reset()">重新开始</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--主内容结束-->
<style>
    .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
</body>

<script src="/main/js/jquery-1.7.1.min.js" language="javascript" type="text/javascript"></script>
<script src="/main/js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="/main/js/jquery.jscrollpane.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/main/js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="/main/js/jquery.touchSlider.js"></script>
<script type="text/javascript" src="/main/js/jquery.nicescroll.js"></script>
<script src="/main/js/slide.js" language="javascript" type="text/javascript"></script>

<script th:inline="javascript">
    function setImg(){
        var imgObjPreview=document.getElementById("img");
        imgObjPreview.src = [[*{session.user.user_img_path}]] + [[*{session.user.user_img_name}]] ;
    }
</script>
<script type="text/javascript">
    $(function() {
        init();
    })
    function init() {
        setImg();
    }
</script>
<script>
    var chess = document.getElementById('chess')
    var context = chess.getContext('2d')
    var me = true
    var chessBoard = []
    var over = false
    var score = ""


    // 赢法数组
    var wins = []

    // 赢法的统计数组
    var myWin = []
    var computerWin = []

    for (var i = 0; i < 15; i++) {
        chessBoard[i] = []
        for (var j = 0; j < 15; j++) {
            chessBoard[i][j] = 0
        }
    }

    // 三维数组
    for (var i = 0; i < 15; i++) {
        wins[i] = []
        for (var j = 0; j < 15; j++) {
            wins[i][j] = []
        }
    }

    // 横线赢法
    var count = 0
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j < 11; j++) {
            // wins[0][0][0] = true
            // wins[0][1][0] = true
            // wins[0][2][0] = true
            // wins[0][3][0] = true
            // wins[0][4][0] = true

            // wins[0][1][1] = true
            // wins[0][2][1] = true
            // wins[0][3][1] = true
            // wins[0][4][1] = true
            // wins[0][5][1] = true
            for (var k = 0; k < 5; k++) {
                wins[i][j + k][count] = true
            }
            count++
        }
    }

    // 竖线赢法
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j < 11; j++) {
            for (var k = 0; k < 5; k++) {
                wins[j + k][i][count] = true
            }
            count++
        }
    }

    // 斜线赢法
    for (var i = 0; i < 11; i++) {
        for (var j = 0; j < 11; j++) {
            for (var k = 0; k < 5; k++) {
                wins[i + k][j + k][count] = true
            }
            count++
        }
    }

    // 散斜线赢法
    for (var i = 0; i < 11; i++) {
        for (var j = 14; j > 3; j--) {
            for (var k = 0; k < 5; k++) {
                wins[i + k][j - k][count] = true
            }
            count++
        }
    }

    console.log(count)

    for (var i = 0; i < count; i++) {
        myWin[i] = 0
        computerWin[i] = 0
    }

    context.strokeStyle = '#000'

    var logo = new Image()
    logo.src = 'https://s1.ax1x.com/2020/10/25/BeoauD.jpg'
    logo.onload = function() {
        context.drawImage(logo, 0, 0, 450, 450)
        drawChessBoard()
    }

    var drawChessBoard = function() {
        for (var i = 0; i < 15; i++) {
            context.moveTo(15 + i * 30, 15)
            context.lineTo(15 + i * 30, 435)
            context.stroke()

            context.moveTo(15, 15 + i * 30)
            context.lineTo(435, 15 + i * 30)
            context.stroke()
        }
    }

    var oneStep = function(i, j, me) {
        context.beginPath()
        context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI)
        context.closePath()
        var gradient = context.createRadialGradient(
            15 + i * 30 + 2, 15 + j * 30 - 2, 13,
            15 + i * 30 + 2, 15 + j * 30 - 2, 0,
        )
        if (me) {
            gradient.addColorStop(0, '#0A0A0A')
            gradient.addColorStop(1, '#636766')
        } else {
            gradient.addColorStop(0, '#D1D1D1')
            gradient.addColorStop(1, '#F9F9F9')
        }

        context.fillStyle = gradient
        context.fill()
    }

    chess.onclick = function(e) {
        if (over) {
            return
        }
        if (!me) {
            return
        }
        var x = e.offsetX
        var y = e.offsetY
        var i = Math.floor(x / 30)
        var j = Math.floor(y / 30)
        if (chessBoard[i][j] === 0) {
            oneStep(i, j, me)
            chessBoard[i][j] = 1

            for (var k = 0; k < count; k++) {
                if (wins[i][j][k]) {
                    myWin[k]++
                    computerWin[k] = 6
                    if (myWin[k] === 5) {
                        window.alert('你赢了')
                        score = "1"
                        uploadscore();
                        over = true
                    }
                }
            }
            if (!over) {
                me = !me
                computerAI()
            }
        }
    }

    var computerAI = function() {
        var myScore = []
        var computerScore = []
        var max = 0
        var u = 0,
            v = 0
        for (var i = 0; i < 15; i++) {
            myScore[i] = []
            computerScore[i] = []
            for (var j = 0; j < 15; j++) {
                myScore[i][j] = 0
                computerScore[i][j] = 0
            }
        }
        for (var i = 0; i < 15; i++) {
            for (var j = 0; j < 15; j++) {
                if (chessBoard[i][j] === 0) {
                    for (var k = 0; k < count; k++) {
                        if (wins[i][j][k]) {
                            if (myWin[k] === 1) {
                                myScore[i][j] += 200
                            } else if (myWin[k] === 2) {
                                myScore[i][j] += 400
                            } else if (myWin[k] === 3) {
                                myScore[i][j] += 2000
                            } else if (myWin[k] === 4) {
                                myScore[i][j] += 10000
                            }
                        }
                        if (wins[i][j][k]) {
                            if (computerWin[k] === 1) {
                                computerScore[i][j] += 220
                            } else if (computerWin[k] === 2) {
                                computerScore[i][j] += 420
                            } else if (computerWin[k] === 3) {
                                computerScore[i][j] += 2100
                            } else if (computerWin[k] === 4) {
                                computerScore[i][j] += 20000
                            }
                        }
                    }
                    if (myScore[i][j] > max) {
                        max = myScore[i][j]
                        u = i
                        v = j
                    } else if (myScore[i][j] === max) {
                        if (computerScore[i][j] > computerScore[u][v]) {
                            u = i
                            v = j
                        }
                    }

                    if (computerScore[i][j] > max) {
                        max = computerScore[i][j]
                        u = i
                        v = j
                    } else if (computerScore[i][j] === max) {
                        if (myScore[i][j] > myScore[u][v]) {
                            u = i
                            v = j
                        }
                    }
                }
            }
        }
        oneStep(u, v, false)
        chessBoard[u][v] = 2
        for (var k = 0; k < count; k++) {
            if (wins[u][v][k]) {
                computerWin[k]++
                myWin[k] = 6
                if (computerWin[k] === 5) {
                    window.alert('计算机赢了')
                    score = "0"
                    uploadscore();
                    over = true
                }
            }
        }
        if (!over) {
            me = !me
        }
    };
    function uploadscore(){
        $.ajax({
            type:"post",//请求类型
            url:"uploadRankForadd",//请求地址
            dataType:"json",//交互的数据类型
            data:{
                type:"30002",
                score:score
            },
            cache:false
        });
    }

    function reset(){
        location.href = "goWuZiQi";
    }
</script>
</html>
